<template>
  <div class="user">
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="username" label="账号" width="120" />
    <el-table-column prop="nickname" label="昵称" width="120" />
    <el-table-column prop="sex" label="性别" width="120" />
    <el-table-column prop="iPhone" label="联系方式" width="120" />
    <el-table-column prop="address" label="地址" width="600" />
    <el-table-column fixed="right" label="Operations" min-width="120">
      <template #default>
        <el-button link type="primary" size="small" @click="handleClick">
          Detail
        </el-button>
        <el-button link type="primary" size="small">Edit</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div style="padding:20px">
    <el-pagination
    v-model:current-page="queryParams.pageNum"
    v-model:page-size="queryParams.pageSize"
    :page-sizes="[100, 200, 300, 400]"
    background
    layout="total, sizes, prev, pager, next, jumper"
    :total="400"
    @size-change="(val) => { queryParams.pageSize = val}"
    @current-change="(val) => { queryParams.pageNum = val}"
  />
  </div>
  
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive,watch, onMounted } from 'vue'

const queryParams = reactive({
  pageNum:1,
  pageSize:10
})


const tableData:any = ref([])
const total:any = ref(0)

const handleClick = () => {
  console.log('click')
}



const getData = () => {
  console.log('getData ==========',queryParams,tableData)
  var res = {
    data:[
      {
        id:1,
        username:'zhangsan',
        nickname:'张三',
        sex:1,
        iPhone:'18588888888',
        address:'宇宙银河系地球',
        date: '2016-05-03',
      },
      {
        id:2,
        username:'lisi',
        nickname:'李四',
        sex:1,
        iPhone:'18588888888',
        address:'宇宙银河系地球',
        date: '2016-05-03',
      },
      {
        id:3,
        username:'zhangsanfeng',
        nickname:'张三丰',
        sex:1,
        iPhone:'18588888888',
        address:'宇宙银河系地球',
        date: '2016-05-03',
      },
      
    ],
    total:110
  }

  tableData.value = res.data
  total.value = res.total
}

watch(queryParams,
      (newValue:any, oldValue:any) => {
        if(newValue.pageNum !== 1 && newValue.pageNum !== oldValue.pageNum){
    queryParams.pageNum  = 1
  }else {
    getData()
  }
      },
      {
        deep: true, // 深度观察
        immediate: true
      }
    )
onMounted(()=> {
  getData()
})
</script>